<template>
	<div class="del-checkbox">
		<div class="del-checkbox-all">
			<a-checkbox
				v-model:checked="checkAll"
				:indeterminate="indeterminate"
				:disabled="disabled"
				@change="onCheckAllChange(dataList.type_key)"
			>
				{{ dataList.type_name }}
			</a-checkbox>
		</div>
		<a-checkbox-group :value="temporaryStorage" class="del-checkbox-group">
			<a-row :gutter="[40, 32]">
				<a-col
					v-for="item in dataList.process_merge_bos"
					:key="item.process_key"
					:span="6"
				>
					<a-checkbox
						:value="item.process_key"
						class="group-checkbox"
						@change="itemChange"
						:disabled="disabled"
					>
						<EllipsisTooltip :title="item.process_name" />
					</a-checkbox>
				</a-col>
			</a-row>
		</a-checkbox-group>
	</div>
</template>

<script lang="ts" setup>
import EllipsisTooltip from '@/entry_desktop/components/EllipsisTooltip'
import { ColSize } from 'ant-design-vue/lib/grid/Col'
import { Item } from 'ant-design-vue/lib/vc-menu'
import { forEach } from 'lodash'
import {
	defineProps,
	ref,
	onMounted,
	watch,
	nextTick,
	defineExpose,
	defineEmits,
} from 'vue'
const props = defineProps<{
	dataList: { process_merge_bos: { process_key: string }[]; type_key: string }
	temporaryStorage: string[]
	processKeyListStar: false
	disabled: boolean
}>()
const emit = defineEmits(['listChange'])
const type_key = ref(props.dataList.type_key)

const checkedList: any = ref([])

const checkAll = ref(false) //全选选择中
const indeterminate = ref(false) //将要全选选中

const changeChecker = (type: string) => {
	if (
		props.dataList?.process_merge_bos?.length < props.temporaryStorage?.length
	) {
		const array: any[] = []
		props.dataList?.process_merge_bos?.forEach((Item: any) => {
			props.temporaryStorage.forEach(element => {
				if (Item.process_key == element) {
					array.push(Item)
				}
			})
		})
		indeterminate.value =
			array.length > 0 &&
			array.length < props.dataList?.process_merge_bos?.length
		checkAll.value = array.length == props.dataList?.process_merge_bos?.length
	} else {
		indeterminate.value =
			props.temporaryStorage?.length > 0 &&
			props.temporaryStorage?.length < props.dataList?.process_merge_bos?.length
		checkAll.value =
			props.temporaryStorage?.length >=
			props.dataList?.process_merge_bos?.length
	}
}

changeChecker('setup')

watch(
	() => {
		return props.dataList.process_merge_bos
	},
	state => {
		changeChecker('process_merge_bos')
	},
	{ deep: true }
)

watch(
	() => {
		return props.temporaryStorage
	},
	state => {
		changeChecker('temporaryStorage')
	}
)

//获得当前点击行数据 //并缓存
const list = ref()
watch(
	() => props.dataList,
	() => {
		const propData: any = props.dataList
		list.value = propData.process_merge_bos
	},
	{
		immediate: true,
	}
)

//全选
const onCheckAllChange = (e: any) => {
	props.dataList.process_merge_bos.map(item => {
		emit(
			'listChange',
			item.process_key,
			props.dataList.type_key,
			checkAll.value
		)
	})
	changeChecker('onCheckAllChange')
}

//单选
const itemChange = (e: any) => {
	emit('listChange', e.target.value, props.dataList.type_key, e.target.checked)
	nextTick(() => {
		changeChecker('listChange')
	})
}

defineExpose({
	type_key,
	checkAll,
	onCheckAllChange,
})
</script>

<style lang="less" scoped>
.del-checkbox {
	-moz-user-select: none; /*火狐*/
	-webkit-user-select: none; /*webkit浏览器*/
	-ms-user-select: none; /*IE10*/
	-khtml-user-select: none; /*早期浏览器*/
	user-select: none;
}
.del-checkbox-all {
	height: 40px;
	background: #fafbfc;
	line-height: 40px;
	padding-left: 32px;
	.ant-checkbox-wrapper {
		font-size: 15px;
		font-weight: 500;
	}
}
.del-checkbox-group {
	width: 100%;
	padding: 17px 72px 33px 72px;

	.group-checkbox {
		display: flex;
		align-items: center;
	}
	:deep {
		.ant-checkbox + span {
			width: 100%;
		}
	}

	@media (min-width: 0px) and (max-width: 1280px) {
		.ant-col-6 {
			display: block;
			flex: 0 0 20%;
			max-width: 20%;
			height: 48px;
		}
	}

	@media (min-width: 1280px) and (max-width: 1920px) {
		.ant-col-6 {
			display: block;
			flex: 0 0 16.666666%;
			max-width: 16.666666%;
			height: 48px;
		}
	}
	@media screen and (min-width: 1920px) {
		.ant-col-6 {
			display: block;
			flex: 0 0 12.5%;
			max-width: 12.5%;
		}
	}
}
</style>
